<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加用户</title>
    <th:block th:insert="~{/fixed/header::head}"></th:block>
    <link rel="stylesheet" th:href="@{/css/index.css}">
</head>

<script>
    $(function (){
        //添加按钮点击响应事件
        $("#insert").click(function (){
            //获取页面数据，去除空格
            let inputLoginName = $.trim($("#inputLoginName").val());
            let inputPassword = $.trim($("#inputPassword").val());
            let inputUserName = $.trim($("#inputUserName").val());
            //判断页面数据是否为空
            if (inputLoginName != "" && inputPassword != "" && inputUserName != ""){
                //封装数据
                let formData = new FormData;
                formData.append("userLoginName",inputLoginName);
                formData.append("userPasswor",inputPassword);
                formData.append("userName",inputUserName);
                //向后端发送数据
                $.ajax({
                    url:"/admin/user/insert",
                    method:"POST",
                    data:formData,
                    processData: false,   // jQuery不要去处理发送的数据
                    contentType: false,   // jQuery不要去设置Content-Type请求头
                    success:function (data){
                        if (data){
                            location.href = "/admin/user";
                        }else {
                            $("#modalText").text("有重复登录名！");
                            $("#myModal").modal('show');
                        }
                    }
                })
            }else {
                $("#modalText").text("登录名、密码、用户名不能为空！");
                $("#myModal").modal('show');
            }
        })

        //重置按钮点击响应事件
        $("#reset").click(function (){
            //将页面文本框内容清空
            $("#inputLoginName").val(null);
            $("#inputPassword").val(null);
            $("#inputUserName").val(null);
        })
    })
</script>

<body>
<!--头部导航条-->
<th:block th:insert="~{/fixed/headerBar::headBar}"></th:block>

<div class="container-fluid">
    <div class="row">
        <!--侧边栏-->
        <th:block th:insert="~{/fixed/siedBar::siedBar}"></th:block>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
            <form>
                <div class="form-group">
                    <label for="inputLoginName">登录名</label>
                    <input type="text" class="form-control" id="inputLoginName" placeholder="请输入登录名"
                           maxlength="16" onkeyup="value=value.replace(/[\W]/g,'')">
                </div>
                <div class="form-group">
                    <label for="inputPassword">密码</label>
                    <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码"
                           maxlength="18" onkeyup="value=value.replace(/[\W]/g,'')">
                </div>
                <div class="form-group">
                    <label for="inputUserName">用户名</label>
                    <input type="text" class="form-control" id="inputUserName" placeholder="请输入用户名"
                           maxlength="10" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')">
                </div>

                <button id="insert" type="button" class="btn btn-primary">添加</button>
                <button id="reset" type="button" class="btn btn-primary">重置</button>
            </form>
        </main>
    </div>
</div>
<!--引入模态框-->
<th:block th:insert="~{/fixed/modal::modal}"></th:block>
</body>
</html>